import React from 'react';
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input, message, Card, Typography } from 'antd';
import { userRegisterUsingPost } from "@/services/xiBI/userController";

const { Title } = Typography;

type FieldType = {
  userAccount?: string;
  userPassword?: string;
  checkPassword?: string;
  remember?: string;
};

const onFinish = async (values: any) => {
  const params = {
    ...values
  };
  try {
    const res = await userRegisterUsingPost(params);
    if (!res?.data) {
      message.error('注册失败');
    } else {
      message.success('注册成功');
      // 跳转到登录页面
      window.location.href = '/user/login';
    }
  } catch (e: any) {
    message.error('注册失败: ' + e.message);
  }
};

const Register: React.FC = () => (
  <div
    style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      height: '100vh',
      backgroundColor: '#f0f2f5',
    }}
  >
    <Card style={{ width: 400, boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)' }}>
      <Title level={2} style={{ textAlign: 'center', marginBottom: 24 }}>
        用户注册
      </Title>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item
          label="账户号"
          name="userAccount"
          rules={[{ required: true, message: '请输入你的账户号' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="用户名"
          name="userName"
          rules={[{ required: true, message: '请输入你的用户名' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="userPassword"
          rules={[{ required: true, message: '请输入你的密码' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          label="确认密码"
          name="checkPassword"
          rules={[{ required: true, message: '请确认你的密码' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
            注册
          </Button>
        </Form.Item>
      </Form>
    </Card>
  </div>
);

export default Register;
